<template>
	<view class="uni_box">
		<!-- <navbar :isback='false' backgroundColor='#fff'>
			<view slot="left" class="hleft">
				<image class="gllogo" src="/static/LOGO.png" />
			</view>
		</navbar> -->
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<!-- <u-sticky offset-top="0" h5-nav-height="0">
				<view class="hone">
					<view class="hleft" @click="leftClick">
						<text class="hltit">{{$t('i.wotuan')}}</text>
						<image class="xia" src="/static/new/xia.png" />
					</view>
					<view class="hright">
						<image class="ricon" src="/static/new/shezhi.png" />
						<image class="ricon" src="/static/new/yuyan.png" />
						<image class="ricon" src="/static/new/yuyantwo.png"  @click="zshow = true" />
						<view class="rcont" @click="getshouru">Connect</view>
					</view>
				</view>
			</u-sticky> -->
			<Nheader @leftClick="leftClick" @connectWallet="connectWallet" :cont="cont" @gettantwo="gettantwo"></Nheader>
			<view class="htwo">
				<text class="mtuan">{{$t('i.wotuan')}}</text>
				<text class="htmiaoshu">{{$t('i.tuanshuo')}}</text>
			</view>
			<image class="mban" src="/static/new/mban.png" />
			<view class="hthree">
				<view class="hitems">
					<view class="hione">
						<image class="rentwo" src="/static/new/rentwo.png" />
						<text class="tui">{{$t('i.tuiren')}}</text>
					</view>
					<text class="nums">{{tui_jian_ren_shu}}</text>
				</view>
				<view class="hitems">
					<view class="hione">
						<image class="rentwo" src="/static/new/xshang.png" />
						<text class="tui">{{$t('i.tuanye')}}</text>
					</view>
					<text class="nums">{{tuan_dui_ye_ji}} BNB</text>
				</view>
				<view class="hitems">
					<view class="hione">
						<image class="rentwo" src="/static/new/ren.png" />
						<text class="tui">{{$t('i.tuanren')}}</text>
					</view>
					<text class="nums">{{tuan_dui_ren_shu}}</text>
				</view>
				<view class="hitems">
					<view class="hione">
						<image class="rentwo" src="/static/new/che.png" />
						<text class="tui">{{$t('i.tuankuang')}}</text>
					</view>
					<text class="nums">{{tuan_dui_shou_kuang}} BNB</text>
				</view>
			</view>

			<view class="hfour">
				<image class="qiu" src="/static/new/qiu.png" />
				<text class="yaotit">{{$t('i.yao')}}</text>
				<view class="yaoview">
					
					<scroll-view scroll-x style="width: 92%;">
						<text class="lian">{{url2}}</text>
					</scroll-view>
					<image class="fuzhi" @click="copy(url)" src="/static/new/fuzhi.png" />
				</view>
				<text class="canyu">{{$t('i.canquan')}}</text>
			</view>
			<view class="hfive">
				<!-- <image class="bg" src="/static/new/bg.png" /> -->
				<view class="hfview">
					<text class="tuantit"> {{$t('i.tuanji')}}</text>

					<view class="diview">
						<view class="dihead">
							<view class="ones"> {{$t('i.dizhi')}}</view>
							<view class="ones">{{$t('i.tuirenshu')}}</view>
							<view class="ones">{{$t('i.tuanren')}}</view>
							<view class="ones">{{$t('i.yeji')}}</view>
						</view>
						<view class="ditwo" v-for="(item,index) in cclist" :key="index">
							<view class="ones txt">{{item.address}}
								<image class="fuzhi" style="width: 30rpx;height: 30rpx;margin-left: 5rpx;" @click="copy(item.addr)" src="/static/new/fuzhi.png" />
							</view>
							<view class="ones txt">{{item.tui_jian_ren_shu}}</view>
							<view class="ones txt">{{item.tuan_dui_ren_shu}}</view>
							<view class="ones txt">{{item.ye_ji}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 左侧弹出 -->
		<view class="lpop">
			<u-popup v-model="lshow" mode="left" width="320">
				<view class="lpview">
					<view class="lpone">
						<image class="cha" src="/static/new/cha.png" @click="lshow=false" />
					</view>
					<image class="logo" src="/static/new/logos.png" />
					<view class="pitemstwo " @click="navrouter('/pages/tabbar/ShouRu')">{{$t('i.kuangshou')}}</view>
					<view class="pitemstwo pitems" @click="navrouter('/pages/tabbar/Tabhome')">{{$t('i.wotuan')}}</view>
					<view class="pitemstwo" @click="navrouter('/pages/tabbar/Team')"> {{$t('i.woshe')}}</view>
					<image class="grentwo" src="/static/new/grentwo.png" mode="widthFix" />
				</view>
			</u-popup>
		</view>

		<!-- 中间弹出 -->
		<view class="zpop">
			<u-popup v-model="zshow" mode="center">
				<view class="tanview">
					<image class="gren" src="/static/new/gren.png"/>
					<view class="zpview">
						<view class="lpone">
							<image class="cha" src="/static/new/cha.png" @click="zshow=false" />
						</view>
						
						<view class="gview">
							<view class="gitem" @click="switchLang('en')">
								<image class="gone" src="/static/new/gone.png" />
								<text>English</text>
							</view>
							<view class="gitem" @click="switchLang('zh')">
								<image class="gone" src="/static/new/gtwo.png" />
								<text>中文</text>
							</view>
							<view class="gitem" @click="switchLang('th')">
								<image class="gone" src="/static/new/gthree.png" />
								<text>日本語</text>
							</view>
							<view class="gitem" @click="switchLang('hh')">
								<image class="gone" src="/static/new/gfour.png"/>
								<text>한국어</text>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>


		<u-select v-model="show" :list="list" @confirm="confirm" ></u-select>
</view>
</template>

<script>
	import {connectMetamask, getAllnodes} from "@/utils/dapp.js"
	import {defaultTo, path, take, takeLast} from "ramda"
	import { DateTime } from 'luxon'
	import axios from 'axios'
import tryCatch from "ramda/src/tryCatch"
import { ethers } from "ethers"
import Nheader from '@/components/Nheader/Nheader'
export default {
	data() {
		return {
			bgcolor:'#fff',
			checked:false,
			border:false,
			type:'1',
			show:false,
			keywords:'',
			list: [],
			hbg:'#0d0e0f',
			cont:'',
			typeindex:0,
			iszhan:false,
			zhaninfo:{},
			applist:[],
			lshow:false,
			zshow:false,
			url:'',
			url2:'',
			tuan_dui_ren_shu:0,
			tuan_dui_shou_kuang:0,
			tuan_dui_ye_ji:0,
			tui_jian_ren_shu:0,
			cclist:[]
		}
	},
	components: {
		Nheader
	},
	computed: {
	},

	mounted() {
		
	},
	async onLoad() {
		const addr = await connectMetamask()
		// this.url =  `http://127.0.0.1:8083/api/info?address=0xc18449e9a8fd278dfeae99855c57edfca207f9fc`
		if(typeof addr === 'string'){
			this.cont = take(5, addr) + '...' +  takeLast(3, addr)
			this.keywords = addr
		
			this.zhaninfo = this.list[1]
			this.typeindex = 1
			console.log(this.zhaninfo)
			var currentUrl = window.location.protocol+'//'+window.location.host;
			console.log(currentUrl); // 输出当前浏览器的完整URL
			this.url = currentUrl+'?i='+addr
			this.url2 = currentUrl+'?i='+take(9, addr) + '...' +  takeLast(7, addr)
		    console.log(this.url)
			// const api_url = `http://gmmweb.info/api/info?address=${addr}`
					const api_url = `/api/info?address=${addr}`
			// const api_url = `http://127.0.0.1:8083/api/info?address=0xc18449e9a8fd278dfeae99855c57edfca207f9fc`
			const response = await axios.get(api_url).catch((error) => console.log('error: ', error))
			if (!response) return null
			const data = response.data
			if(data.code != 200) return console.log('error 2: ', data)
		
			const tuandui = path(['data', 'tuan_dui'], data) || []
			const zhitui = path(['data', 'zhi_tui'], data) || []
		
			this.tuan_dui_ren_shu = tuandui
			this.tui_jian_ren_shu = zhitui.length
			this.tuan_dui_shou_kuang = path(['data', 'tuan_dui_shou_kuang'], data)  || 0
			this.tuan_dui_ye_ji = path(['data', 'tuan_dui_ye_ji'], data)  || 0
			this.cclist = (path(['data', 'list'], data)  || [])
				.map(a => ({...a, address: take(5, a.addr) + '...' +  takeLast(3, a.addr)}))
		
		}
		
		
		
	},
	async onShow() {
		
	},
	onReachBottom: function () {
	},
	methods: {
		getshouru(){
			console.log('33')
		},
		typeClick(e){
			this.type = e
		},
		async cancelAppo(){
			console.log(33333)
		},
		async connectWallet(){
			const addr = await connectMetamask()
			if(typeof addr === 'string'){
			this.cont = take(5, addr) + '...' +  takeLast(3, addr) + ' '
			}
		},
		async getLogintwo(code){
			let res = await this.$u.api.miniapplogin({
				code:code
				// userid:uni.getStorageSync('userid')
			});
			console.log(res.userinfo)
			this.seeion_key = res.seeion_key
			uni.setStorageSync('token',res.userinfo.token)
			// uni.setStorageSync('userid',res.Data.userinfo.userid)
			if(res.userinfo.mobile == ''||!res.userinfo.mobile){
				//弹出登录
				this.loginshow = true
			}else{
				this.getInit()
			}
			// // console.log(res)
			// console.log(res.Data)
		},
		
		async getLun(){
			let res = await this.$u.api.banner({
			});
			console.log(res) 
		},
		async getList(){//列表数据
			let res = await this.$u.api.project({
			  pagesize:this.limit,
			  page:this.page,
			  keywords:this.keywords
			});
			console.log(res)
			this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			// console.log(this.list)
			if(this.page >= this.last_page){
			  this.status = 'nomore';
			}
			
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		confirm(e){
			console.log(e)
		},
		swchange(e){
			console.log(e)
			if(!e){
				this.bgcolor = '#fff'
			}else{
				this.bgcolor = '#0d0e0f'
			}
			console.log(bgcolor)
		},
		async typeClick1(item,index){
			this.typeindex = index
			this.zhaninfo = item
			this.iszhan=false
			
			try{
				const chain_id = await window.ethereum.request({ method: "eth_chainId" })
				if(chain_id != item.chainid){
					await window.ethereum.request({
					  method: 'wallet_switchEthereumChain',
					  params: [{ chainId: item.chainid }]
					});
				}
			}catch(e){
				//TODO handle the exception
			}
			
			
		},
		leftClick(){
			this.lshow = true
		},
		switchLang(e) {
			this.$i18n.locale = e
			// console.log(this.$i18n.locale)
			uni.setStorageSync('locale', e)
			this.zshow = false
			// this.$store.commit('getwen');
		},
		gettantwo(){
			this.zshow = true 
		}
		
		

	}
}
</script>

<style lang="scss" scoped>
page,
html {
}
.newcontent{
	min-height: 100vh;
	padding-bottom: 30rpx;
	background-color:  #121212;

	.hone{
		height: 88rpx;
		background: #121212;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		.hleft{
			padding: 10rpx 25rpx;
			border-radius: 30rpx;
			opacity: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			border: 2rpx solid #0066FF;
			.hltit{
				font-size: 24rpx;
				font-family: Segoe UI, Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
			}
			.xia{
				width: 21rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}
		}
		.hright{
			margin-left: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			.ricon{
				width: 40rpx;
				height: 40rpx;
				margin-right: 25rpx;
			}
			.rcont{
				// height: 52rpx;
				background: linear-gradient(122deg, #1033F6 0%, #940AFF 100%);
				border-radius: 30rpx;
				opacity: 1;
				padding: 10rpx 25rpx;
				font-size: 28rpx;
				font-family: Segoe UI, Segoe UI;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}
	.htwo{
		padding: 70rpx 30rpx 57rpx 30rpx;
		.mtuan{
			font-size: 54rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			color: #FFC142;
			display: block;
			margin-bottom: 50rpx;
		}
		.htmiaoshu{
			font-size: 28rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: 400;
			color: #eee;
		}

	}
	.mban{
		width: 100%;
		height: 360rpx;
	}
	.hthree{
		padding: 86rpx 36rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.hitems{
			width: 47%;
			// height: 145rpx;
			padding: 16rpx 20rpx;
			// background: linear-gradient(132deg, #1033F6 0%, #940AFF 100%);
			// border-radius: 10rpx;
			background: linear-gradient(2deg, #FFD460, #F3A100);
			border-radius: 5rpx;
			box-shadow: 0rpx 5rpx 12rpx 0rpx rgba(254,209,91,0.64);
			border: 2rpx solid #FFE4A1;
			opacity: 1;
			margin-bottom: 27rpx;
			.hione{
				display: flex;
				flex-direction: row;
				align-items: center;
				.rentwo{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				.tui{
					font-size: 28rpx;
					font-family: HarmonyOS Sans, HarmonyOS Sans;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.nums{
				font-size: 35rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans;
				font-weight: bold;
				color: #fff;
				display: inline-block;
				margin-left: 35rpx;
				margin-top: 10rpx;
			}
		}
		.hitems:nth-child(even){
			margin-left: auto;
		}
	}
	.hfour{
		position: relative;
		padding: 0 36rpx;
		height: 189px;
		.qiu{
			position: absolute;
			right: -110px;
			height: 300px;
    		z-index: 1;
		}
		.yaotit{
			font-size: 32rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: bold;
			color: #FFFFFF;
			display: block;
			margin-bottom: 27rpx;
		}
		.yaoview{
			padding: 20rpx 25rpx;
			background: linear-gradient(2deg, #FFD460, #F3A100);
			border: 2rpx solid #FFE4A1;
			box-shadow: 0rpx 5rpx 12rpx 0rpx rgba(254,209,91,0.64);
			// background: linear-gradient(133deg, #1033F6 0%, #940AFF 100%);
			border-radius: 10rpx;
			opacity: 1;
			display: flex;
			flex-direction: row;
			z-index: 2;
			position: relative;
			align-items: center;
			.lian{
				display: inline-block;
				max-width: 80%;
				font-size: 28rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans;
				font-weight: 400;
				color: #FFFFFF;
			}
			.fuzhi{
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}
		}
		.canyu{
			font-size: 24rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: 400;
			color: #8E8E95;
			display: block;
			margin-top: 20rpx;
		}
	}
	.hfive{
		position: relative;
		min-height: 500rpx;
		.bg{
			position: absolute;
			width: 100%;
			height: 600rpx;
			top: 50rpx;
		}
		.hfview{
			position: relative;
			padding: 0 36rpx;
		}
		.tuantit{
			font-size: 48rpx;
			font-family: HarmonyOS Sans, HarmonyOS Sans;
			font-weight: bold;
			color: #FFFFFF;
		}
		.diview{
			.dihead{
				display: flex;
				flex-direction: row;
				padding: 30rpx 0;
				.ones{
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.ditwo{
				display: flex;
				flex-direction: row;
				background: #2E2E2E;
				padding: 20rpx 0;
				.ones{
					font-size: 22rpx;
					font-family: Arial, Arial;
					font-weight: 400;
					color: #A9A9A9;
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					// padding: 0 15rpx;
					text-align: center;
					margin-left: 10rpx;
					// display: inline-block;
				}
			}
			.ditwo:nth-child(even){
				background: rgba(37, 37, 37, 0.58);
				.ones{
					color: #A9A9A9;
				}
			}
		}
	}
}
// 左侧弹出
.lpop{
  /deep/ .u-drawer-left{
	background: linear-gradient(2deg, #FFD460, #F3A100);
	border-radius: 5rpx;
	border: 2rpx solid #FFE4A1;
	// background: linear-gradient(180deg, #1033F6 0%, #940AFF 100%);
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
  }
  .lpview{
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	.lpone{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
	}
	.cha{
		width: 48rpx;
		height: 48rpx;
	}
	.logo{
		margin: 78rpx auto 76rpx ;
		height: 95rpx;
		width: 85%;
	}
	
	.pitemstwo{
		padding: 25rpx 20rpx;
		// background: #FFFFFF;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
		margin-bottom: 50rpx;
	}
	.pitems{
		padding: 25rpx 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: bold;
		color: #F3A100;
		margin-bottom: 50rpx;
	}
	.grentwo{
		width: 100%;
		margin-top: auto;
		height: 429rpx;
	}
  }
}
// 左侧弹出结束
.tanview{
	position: relative;
	width: 352px;
    height: 371px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zpop{
  /deep/ .u-mode-center-box{
	background: transparent;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
  }
  .gren{
	width: 241rpx;
	height: 268rpx;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	position: absolute;
	top: -25px;
    z-index: 100;
    left: 23px;
}
  .zpview{
	width: 504rpx;
	// height: 508rpx;
	background: linear-gradient(2deg, #FFD460, #F3A100);
	border-radius: 5rpx;
	border: 2rpx solid #FFE4A1;
	box-shadow: 0rpx 5rpx 21rpx 0rpx rgba(254,209,91,0.64);
	// background: linear-gradient(180deg, #1033F6 0%, #940AFF 100%);
	border-radius: 44rpx;
	opacity: 1;
	position: relative;
	padding: 30rpx 26rpx;
	
	.lpone{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		margin-bottom: 50rpx;
	}
	.cha{
		width: 48rpx;
		height: 48rpx;
	}
	.gview{
		display: flex;
		flex-direction: column;
		.gitem{
			padding: 19rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			opacity: 1;
			border: 2rpx solid #FFFFFF;
			margin-bottom: 20rpx;
			.gone{
				width: 57rpx;
				height: 37rpx;
				margin-right: 24rpx;
			}
			text{
				font-size: 32rpx;
				font-family: Satoshi-Medium, Satoshi-Medium;
				font-weight: normal;
				color: #FFFFFF;
				display: inline-block;
				width: 100rpx;
			}
		}
	}
  }
}  
</style>
